<template>
    <div class="addmenu-box">
        <!-- 添加菜单 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-tree class="tree-box" ref="menuTree" highlight-current :data="dataArr" show-checkbox node-key="menuId" 
            @check-change="handleCheckChange" :props="defaultProps">
        
        
        </el-tree>
        <!-- 选择角色 -->
        <p>选择要添加菜单的用户角色 (单选)</p>
        <p></p>
        <el-table :data="roleUser" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection"  width="55"></el-table-column>
            <el-table-column prop="account" label="账号" width="200"></el-table-column>
            <el-table-column prop="userName" label="姓名" width="200"></el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button type="success" @click="saveMenu()">点 击 保 存</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            currUser:{},
            menuData: [],
            roleUser:[],
            defaultProps: {
                children: 'childList',
                label: 'menuName'
            },
            menuVo:{
                menuIds:[],
                roleId:-1
            }
        }
    },
    created(){
        this.currUser = JSON.parse(sessionStorage.getItem("user"));
        this.getMenus();
        this.getRoleUser();
    },
    methods:{
        //获取菜单
        getMenus(){
            this.$http.get("/menu/list").then((res)=>{
                // console.log(res);
                // console.log(res);
                // console.log(res.code)
                if(res.code === 200){
                    let dataArr = res.data;
                    // 排序处理
                    dataArr.sort((a,b)=>{return a.menuSort - b.menuSort});
                    this.menuData = dataArr;
                }else{
                    this.$message.warning("获取菜单失败,请联系管理员!!!");
                }
            }).catch((err)=>{
                this.$message.error("获取菜单失败,请联系管理员!!!");
            });
        },
        //获取角色信息
        getRoleUser(){
           this.$http.get("/user/list").then((res)=>{
                //   console.log(res);
                if("200" === res.code){
                    this.roleUser = res.data;
                    // console.log(this.roleUser);
                }else{
                    this.$message.warning("获取数据失败,请联系管理员!!!");
                }
            }).catch((err)=>{
                this.$message.error("获取数据失败,请联系管理员!!!");
            }); 
        },
        //选择角色
        handleSelectionChange(val) {
            if(val.length > 1){
                return this.$message.warning("只能选择一条数据!!!");
            }
            if(val.length === 1){
                this.menuVo.roleId = val[0].roleId;
                // console.log("选择:"+this.multipleSelection.userId);
            }          
        },
        //选择的菜单
        handleCheckChange(data, checked, indeterminate) {
            if(data === null){
                return this.$message.warning("请选择数据!!!");
            }
            this.menuVo.menuIds.push(data.menuId);
        },
        //保存
        saveMenu(){
            this.$http.post("/getRoleInfo/saveMenuRoleInfo",this.menuVo).then((res)=>{
                // console.log(res);
                if(res.code === 200 && res.data){
                    this.$message.success(res.msg);
                }else{
                    this.$message.error(res.msg);
                }
                this.resetChecked();
                this.menuVo = {
                    menuIds:[],
                    roleId:-1
                };
            }).catch((err)=>{
                this.$message.error("添加菜单失败,请联系管理员!!!");
            });
        },
        //重置菜单
        resetChecked() {
            //清楚菜单
            this.$refs.menuTree.setCheckedKeys([]);
            //清楚角色
            this.$refs.roleTree.clearSelection();
        }
    }
}
</script>

<style scoped>
.tree-box{
    margin-top: 15px;
}

</style>